<template>
  <Header :activeIndex="activeIndex" />
  <div id="banner-container">
    <el-carousel trigger="click" height="450px">
      <el-carousel-item v-for="(item, index) in bannerImg" :key="index">
        <img :src="item.pic" alt="">
      </el-carousel-item>
    </el-carousel>
</div>
  <div id="hotShop-container">
    <div class="tip custom-block">
        <p class="custom-block-title">热门店铺</p>
     </div>
    <el-row class="shop-box">
    <el-col style="display: flex;flex-wrap: wrap;">
      <el-card class="shop-card" :body-style="{ padding: '0px' }" v-for="(item, index) in hotShopList" :key="index">
        <img
          :src="item.cover"
          class="image"
        />
          <div class="bottom">
            <span>{{ item.name }}</span>
            <time class="star">评分：{{ item.star }}</time>
            <el-button type="primary" style="margin-top: 10px;" @click="toShopStore(item.id)">进入店铺</el-button>
          </div>
      </el-card>
    </el-col>
  </el-row>
  </div>
  <Footer/>
</template>
<script>
import Header from '@/views/front/Header.vue'
import Footer from '@/views/front/Footer.vue'
import { ref, reactive, toRefs } from 'vue'
import { useRouter } from 'vue-router'
import { bannerApi } from '@/api/banner'
import { hotShopApi } from '@/api/shop-list'
export default {
    components: {
    Header,
    Footer
  },
  setup() {
    const activeIndex = ref('1')
    const currentDate = ref(new Date())
    const data = reactive({
      bannerImg: [],
      hotShopList: []
    })
    const bannerList = () => {
      bannerApi().then((res) => {
        if (res.data) {
          data.bannerImg = res.data
        }
      })
    }
    const GetHotShop = () => {
      hotShopApi().then((res) => {
        if (res.data) {
          data.hotShopList = res.data
        }
      })
    }
    const router = useRouter()
    const toShopStore = (id) => {
      router.push({
        name: 'shop-detail',
        params: { id: id }
      })
    }
    bannerList()
    GetHotShop()
    return {
      activeIndex,
      currentDate,
      ...toRefs(data),
      toShopStore
    }
  },
  methods: {
    
}
}
</script>

<style>
#banner-container{
    text-align: center;
    margin-top: 10px;
}
#banner-container img{
    width: 90%;
}

#hotShop-container .shop-box{
    padding: 0 80px;
}
#hotShop-container .shop-card{
    width: 30%;
    height: 400px;
    margin: 20px;
}
#hotShop-container .star {
  margin-top: 10px;
  font-size: 12px;
  color: #c00;
}

#hotShop-container .bottom {
  padding: 14px;
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  flex-direction: column;
}

#hotShop-container .image {
  width: 100%;
  height: 280px;
  display: block;
}
.custom-block.tip {
  font-weight: bold;
  padding:8px 16px;
  background: linear-gradient(to right, #d6e3f0, #fff);
  border-radius:4px;
  border-left:5px solid var(--el-color-primary);
  margin-left: 70px
}
</style>
